<template>
    <div class="container">
        <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px"
                 class="demo-ruleForm">
            <!--<el-form-item label="放生前几分钟进入倒计时(单位：s)" prop="p1" label-width="300">-->
                <!--<el-input type="number" v-model="ruleForm2.p1" auto-complete="off" style="width: 300px;"></el-input>-->
            <!--</el-form-item>-->
            <!--<el-form-item label="一级推广收益率" prop="p2" label-width="300">-->
                <!--<el-input type="number" v-model="ruleForm2.p2" auto-complete="off" style="width: 300px;"></el-input>-->
            <!--</el-form-item>-->
            <!--<el-form-item label="二级推广收益率" prop="p3" label-width="300">-->
                <!--<el-input type="number" v-model="ruleForm2.p3" auto-complete="off" style="width: 300px;"></el-input>-->
            <!--</el-form-item>-->
            <!--<el-form-item label="客服二维码" prop="p3" label-width="300">-->
                <!--<img :src="ruleForm2.p4||'../../static/img/plus.png'" alt="" style="width: 80px;height: 80px;" @click="upFile">-->
            <!--</el-form-item>-->
            <div v-for="(v,index) in list">
                <el-form-item :label="v.remarks" prop="p1" label-width="300">
                    <el-input type="text" v-model="list[index].value" auto-complete="off" style="width: 300px;"></el-input>
                    <el-button type="primary" @click="sub(v)">保存</el-button>
                </el-form-item>
            </div>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "setting",
        data(){
            return{
                list: [],
                ruleForm2: {
                    p1: '',
                    p2: '',
                    p3: '',
                    p4: '',
                },
                rules2: {
                    // p1: [
                    //     {required: true, message: '请输入倒计时', trigger: 'blur'}
                    // ],
                    // p2: [
                    //     {required: true, message: '请输入一级推广收益率', trigger: 'blur'}
                    // ],
                    // p3: [
                    //     {required: false, message: '输入二级推广收益率', trigger: 'blur'}
                    // ],
                }
            }
        },
        mounted(){
          this.getInfo()
        },
        methods:{
            loadopen() {
                this.loading = this.$loading({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.2)'});
                setTimeout(() => {this.loading.close();}, 5000);
            },
            loadclose() {
                this.loading.close();
            },
            getInfo(){
                let self = this;
                this.loadopen();
                this.config.get('/admin/systemConfig/page', {start: 1, limit: 20}).then(res => {
                    this.loadclose();
                    if (res.data.code === '0') {
                        // this.$message({message: res.data.message, type: 'success'});
                        console.log(res.data)
                        self.list = res.data.list;
                    } else {
                        this.$message.error(this.config.handleError(res.data));
                    }
                    this.$emit('done', '');
                });
            },
            // 上传文件（前端直传oss）
            upFile(){
                let self = this;
                let el = document.createElement('input')
                el.type = 'file';el.accept="image/*"
                el.onchange = (e)=>{
                    self.ruleForm2.p4 = '';
                    self.loadopen()
                    pub.ossupFile(e.target, (res)=>{
                        self.loadclose()
                        // console.log(res, '哈哈，我拿到了')
                        self.ruleForm2.p4 = res;
                    })
                };
                el.click();
            },
            submitForm(formName, index) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let obj = {
                            id: this.list[index].id,
                            value: this.list[index].value,
                            remarks: this.list[index].remarks,
                        };
                        this.loadopen();
                        this.config.post3('/admin/main/UpdateSystemConf', obj).then(res => {
                            this.loadclose();
                            if (res.data.code === '0') {
                                this.$message({
                                    message: res.data.message,
                                    type: 'success'
                                });
                                this.getInfo()
                            } else {
                                this.$message.error(this.config.handleError(res.data));
                            }
                            this.$emit('done', '');
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            sub(v){
                this.loadopen();
                this.config.post3('/admin/systemConfig/edit', {
                    id: v.id,
                    remarks: v.remarks,
                    value: v.value,
                }).then(res => {
                    this.loadclose();
                    if (res.data.code === '0') {
                        this.$message({
                            message: res.data.message,
                            type: 'success'
                        });
                        this.getInfo()
                    } else {
                        this.$message.error(this.config.handleError(res.data));
                    }
                });
            }
        }
    }
</script>

<style scoped>

</style>
